<template>
  <div>
    <!-- VIN选择 -->
    <TopFilter
      :list="formList"
      :cols="3"
      @filterChange="changeHandle"
    />
    <br /><br />
    <FilterTable
      ref="table"
      selectionType="single"
      :onRowSelectChange="selectChange"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'records'"
      :onColumnsChange="columns => this.columns = columns"
    />

    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <el-button :disabled="this.isChoice" @click="saveDialog" type="primary">确 定</el-button>
      <el-button @click="closeDialog">取 消</el-button>
    </div>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin'; //数据字典
import { parseTime } from '@/utils/index'; //时间过滤
import { inquiryVehicle, vehicleConfiguration, queryVsStoreAll } from '@/api/retail/salesmanage/confirmcar';
import moment from 'moment'
export default {
  name: 'clueSelection',
  mixins: [dictionary],
  props:['productId','rowData'],
  data() {
    return {
    	formList: this.createFormList(), //上方搜索数据
      columns: this.createTableColumns(),
      fetchApi: inquiryVehicle,
      fetchParams: {productId:this.productId?this.productId:""}, //表格默认参数
      selectedRows: [], //选中列表中的行
      isChoice: true, //按钮是否可以选择
    };
  },
  created (){
    if(this.rowData.brandId && this.rowData.modelId && this.rowData.seriesId){
      this.fetchParams.productId=`${this.rowData.brandId},${this.rowData.modelId},${this.rowData.seriesId},${this.rowData.packageId},${this.rowData.productId}`
    }
    this.init();
  },
  methods: {
    async init (){
      await vehicleConfiguration(0, {
        isUnlimited: 10041001
      }).then( res => {
        this.formList.find(item => item.fieldName == 'productId').itemList = res.data;
        // console.log(this.formList[4])
      }).catch( err => {
        // console.log(err)
      })
      console.log(this.rowData,"rowData")
      
      await queryVsStoreAll().then(res => {
        let storageList = res.data
        storageList && storageList.length > 0 ? storageList = storageList.map(item => {
          return {
            'text': item.storageName,
            'value': item.storageId
          }
        }) : storageList = []
        this.formList.find(item => item.fieldName == 'storageId').itemList = storageList;
        // this.columns[3].filterItems = storageList;
      })
    },
    createFormList (){
    	return [
    		{
          type: 'INPUT',
          label: 'VIN',
          fieldName: 'vin',
          placeholder: '请输入...',
        },
        {
          type: 'SELECT',
          label: '仓库名称',
          fieldName: 'storageId',
          placeholder: '请选择...',
          itemList: []
        },
        {
          type: 'SELECT',
          label: '库存状态',
          fieldName: 'ownStockStatus',
          placeholder: '请选择...',
          itemList: this.createDictList('1413'),
        },
        {
          type: 'SELECT',
          label: '质损状态',
          fieldName: 'trafficMarStatus',
          placeholder: '请选择...',
          itemList: this.createDictList('1040'),
        },
        {
		      type: 'INPUT_CASCADER',
		      label: '产品配置',
		      fieldName: 'productId',
		      placeholder: '请选择',
		      options:{ titles: ['品牌', '车系', '车型', '配置', '颜色'] },
		      itemList:[{
		        text: '一级分类1',
		        value: '1',
		        children: []
		      }],
		    },

    	]
    },
    createTableColumns (){ //表格数据
      const _this = this;
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '库龄(天)',
          dataIndex: 'libraryAge',
          sorter: true,
          filter: true,
          width: 80,
          filterType: 'input',
        },
        {
          title: 'VIN',
          dataIndex: 'vin',
          width: 180,
          showOverflowTooltip:true,
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '仓库名称',
          dataIndex: 'storageName',
          showOverflowTooltip:true,
          sorter: true,
          filter: true,
          filterType: 'input',
          // filterItems: [],
          // render: function(props){
          //   return <span>{_this.preCurrentText(props.row.smsTemplateType, this.filterItems)}</span>;
          // }
        },
        {
          title: '产品名称',
          dataIndex: 'productName',
          showOverflowTooltip:true,
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '产品代码',
          dataIndex: 'productCode',
          showOverflowTooltip:true,
          sorter: true,
          filter: true,
          width: 180,
          filterType: 'input',
        },
        {
          title: '品牌',
          dataIndex: 'brandName',
          showOverflowTooltip:true,
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '车系',
          dataIndex: 'seriesName',
          showOverflowTooltip:true,
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '车型',
          dataIndex: 'modelName',
          showOverflowTooltip:true,
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '配置',
          dataIndex: 'packageName',
          showOverflowTooltip:true,
          sorter: true,
          filter: true,
          width: 180,
          filterType: 'input',
        },
        {
          title: '颜色',
          dataIndex: 'colorName',
          sorter: true,
          showOverflowTooltip:true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '库存状态',
          dataIndex: 'ownStockStatus',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('1413'),
          render: props => {
            return <span>{this.preDictHandler(props.row.ownStockStatus, '1413')}</span>;
          }
        },
        {
          title: '质损状态',
          dataIndex: 'trafficMarStatus',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('1040'),
          render: props => {
            return <span>{this.preDictHandler(props.row.trafficMarStatus, '1040')}</span>;
          }
        },
        {
          title: '首次入库日期',
          dataIndex: 'firstStockInDate',
          sorter: true,
          showOverflowTooltip:true,
          filter: true,
          filterType: 'input',
          render: props => {
            return <span>{this.preDateHandler(props.row.firstStockInDate)}</span>;
          }
        }

      ]
    },
    changeHandle(val){ //搜索
      console.log('搜索的参数：', val)
      this.fetchParams = Object.assign({}, val)
    },
    selectChange (rows){ //选中时触发的函数
      this.selectedRows = rows;
      this.isChoice = this.selectedRows.length > 0? false: true;
    },
    saveDialog (){ //保存
      // console.log('baocun')
      if(this.selectedRows.length > 0){
        this.$emit('close', false, this.selectedRows)
      }else {
        this.$emit('close', false)
      }
    },
    closeDialog (){ //关闭弹框
      this.$emit('close', false)
    },
    // 非字典来源数据处理
    preCurrentText(val, dataList){
      let result = (dataList && dataList.length > 0) ? dataList.find(item => item.value == val) : ''
      return result['text'] || '';
    },
    // 字典数据使用前预处理
    preDictHandler(val, code){
      let resultText = val && String.prototype.includes.call(val, code) ? this.createDictText(val, code) : val;
      return resultText;
    },
    // 日期预处理formatCode='YYYY-MM-DD HH:mm:ss'
    preDateHandler(val, formatCode='YYYY-MM-DD') {
      let resultDate = val ? moment(Number(val)).format(formatCode) : val;
      if ((resultDate == 'Invalid date' || resultDate == 'Invalid Date') && val) {
        resultDate = moment(val).format(formatCode)
      }
      return resultDate;
    },
  }
};
</script>

<style lang="less" scoped>
</style>
